/**
 * Created by Administrator on 2017/11/28 0028.
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import Drawer from 'react-motion-drawer';
import { Form, Input, Select, Button, Card, Row, Col, Icon, Modal, DatePicker, message } from 'antd';
import NewCertificateDrawer from "./NewCertificateDrawer";
import EditCertificateDrawer from "./EditCertificateDrawer";
import './less/personnel.less';
import moment from 'moment';
import {
  systemPerCerBaseInfoFindAll,//查询人员所有证书
  systemPerCerBaseInfoDelete,//删除证书
  systemPerCerBaseInfoFind,//编辑证书-查看证书-展示当前证书信息
  systemPerCerBaseInfoGet,//编辑证书-查看证书-展示当前证书信息-完整模板
} from "../../../services/api";

// const confirm = Modal.confirm;
const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;

@connect(state => ({
  profile: state.profile
}))

@Form.create()

/**
 * 卡片操作组件
 * @param {*属性} props
 */
// function Edit(props) {
//   return <div className="edit">{props.name}</div>
// }
// function Delete(props) {
//   return <div className="delete">{props.name}</div>
// }

export default class CertificateInformationPage extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      /**
       * 抽屉需要
       */
      width: 594,
      editCertificateOpen: false,
      newCertificateOpen: false,
      currentId: 0,
      ModalText: '“[保安员等级证书]”删除后不可找回！是否确认删除？',
      visible: false,
      confirmLoading: false,
      //perId: '',//人员Id
      certificateInformation: [],
      perCerId: '',
      // editList: {},
      // editSpecialArray: [],
      // certificateInformation: [
      //   {
      //     serial: 1,
      //     level: "二级保安员",
      //     number: "BA342446",
      //     office: "陕西众合保安服务有限公司",
      //     date: "2015-09-09"
      //   },
      //   {
      //     serial: 2,
      //     level: "二级保安员",
      //     number: "BA342446",
      //     office: "陕西众合保安服务有限公司",
      //     date: "2015-09-09"
      //   },
      //   {
      //     serial: 3,
      //     level: "二级保安员",
      //     number: "BA342446",
      //     office: "陕西众合保安服务有限公司",
      //     date: "2015-09-09"
      //   }
      // ],
    };
  }

  /**************************生命周期************************************/
  componentDidMount = () => {
    this.getAllCertificateInformation();
    console.log('人员id的值', this.props.perId);
    this.setState({
      perId: this.props.perId,
    });
  }

  /*****************************AJAX******************************************/
  //所有证书
  getAllCertificateInformation = () => {
    const perId = this.props.perId;//人员ID

    // const perId = "402871315091947520";//人员ID
    systemPerCerBaseInfoFindAll({ perId }).then((res) => {
      console.log("获取所有证书", res);
      this.setState({ certificateInformation: res.data });
      console.log("certificateInformation", this.state.certificateInformation);
    }, (err) => {
      console.log("获取所有证书错误信息", err);
    });
  }
  //删除证书
  deleteCertificate = (perCerId) => {
    systemPerCerBaseInfoDelete({ perCerId }).then((res) => {
      console.log("删除当前证书-成功", res);
      message.success("删除成功");
      this.getAllCertificateInformation();
    }, (err) => {
      console.log("删除当前证书-错误信息", err);
    });
  }
  //查看证书
  // showCertificateInfo = (perCerId) => {
  //   // const perCerId = this.state.currentId;
  //   systemPerCerBaseInfoGet({ perCerId }).then((res) => {
  //     console.log('查看当前证书-res:', res);
  //     this.setState(
  //       {
  //         editList: res.data,
  //         editSpecialArray: JSON.parse(res.data.list),
  //       }
  //     );
  //     console.log("编辑List", this.state.editList);
  //     console.log("编辑特殊字段", this.state.editSpecialArray);
  //   }, (err) => {
  //     console.log('查看当前证书-错误信息', err);
  //   });
  // }

  /**********************************相关事件*************************************************/
  //新增证书抽屉
  changeNewDrawer = (newCertificateOpen) => {
    console.log("新增证书抽屉-参数open", newCertificateOpen);
    this.setState({ newCertificateOpen });
  }
  //编辑证书抽屉
  changeEditDrawer = (editCertificateOpen, currentId) => {
    console.log("编辑证书抽屉-参数open", editCertificateOpen);
    console.log("当前Id", currentId);
    this.setState({ editCertificateOpen, currentId });
    //this.showCertificateInfo(currentId);
  }

  showModal = (currentId) => {
    this.setState({
      visible: true,
      perCerId: currentId,
    });
  }
  handleOk = (e) => {
    // this.setState({
    //   ModalText: '“[保安员等级证书]”删除后不可找回！是否确认删除？',
    //   confirmLoading: true,
    // });
    this.setState({
      visible: false,
    });
    console.log("删除ID", this.state.perCerId);
    this.deleteCertificate(this.state.perCerId);
  }
  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false,
    });
  }

  showCard = () => {
    const arrs = this.state.certificateInformation.map((val, index) => {
      return (
        <Col span={12} key={index}>
          <Card
            title={val.perCerTypeName ? val.perCerTypeName : '-'}
          // actions={[
          //   <Edit name="编辑" className="edit">sd </Edit>,
          //   <Delete name="删除" className="delete">dsd</Delete>
          // ]}
          >
            <p className="list-line">
              <span>证书等级:</span>
              <span>{val.perCerLevelName ? val.perCerLevelName : '-'}</span>
            </p>
            <p className="list-line">
              <span>证书编号:</span>
              <span>{val.cerNo}</span>
            </p>
            <p className="list-line">
              <span>发证机关:</span>
              <span>{val.licenceOrg}</span>
            </p>
            <p className="list-line">
              <span>发证日期:</span>
              <span>{moment(val.licenceDate).format('YYYY-MM-DD')}</span>
            </p>

            <ul className="ant-card-actions">
              <li style={{ width: "50%" }}>
                <span>
                  <div
                    className="edit"
                    onClick={this.changeEditDrawer.bind(this, true, val.perCerId)}
                  // onClick={() => {
                  //   this.showCertificateInfo(val.perCerId);
                  //   this.changeEditDrawer.bind(this, true, val.perCerId);
                  // }}
                  >
                    编辑
                  </div>
                </span>
              </li>
              <li style={{ width: "50%" }}>
                <span>
                  <div>
                    <div onClick={this.showModal.bind(this, val.perCerId)} className="delete">删除</div>
                  </div>
                </span>
              </li>
            </ul>
          </Card>
        </Col >
      );
    });
    return arrs;
  }
  //新增证书
  newCertificate = () => {
    /**
     * 抽屉需要样式
     */
    const style = {
      background: "#F9F9F9",
      // boxShadow: "rgba(0, 0, 0, 0.188235) 0px 10px 20px, rgba(0, 0, 0, 0.227451) 0px 6px 6px"
      boxShadow: "0 2px 11px 0 rgba(15, 113, 255, 0.2)"
    };
    /**
     * 抽屉组件内容
     */
    const drawerProps = {
      overlayColor: "rgba(0,0,0,0)",
      drawerStyle: style
    };
    /**
     * 证书表单内容
     */
    const { submitting } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    return (
      <div>
        <Drawer
          {...drawerProps}
          right
          open={this.state.newCertificateOpen}
          noTouchClose
          width={this.state.width}
          zIndex={999}
          onChange={(newCertificateOpen) => {
            this.setState({ newCertificateOpen });
          }}
        >
          <div
            style={{
              backgroundColor: "#fff",
              width: "100%",
              height: "100%"
            }}
            className="certificate-drawer"
          >
            <header className="edit-header">
              <h2>新增证书</h2>
            </header>
            <div className="edit-form">

              <Form
                onSubmit={this.handleSubmit}
                style={{ marginTop: 24 }}
                className="edit-form"
              >
                <FormItem
                  {...formItemLayout}
                  label="证书类型"
                >
                  {getFieldDecorator('certificateType', {
                    rules: [
                      { required: true, message: '请选择证书类型!' },
                    ],
                  })(
                    <Select placeholder="请选择证书类型" className="sls-style">
                      <Option value="护照">居民身份证</Option>
                      <Option value="居民身份证">护照</Option>
                      <Option value="回乡证">回乡证</Option>
                      <Option value="台湾通行证">台湾通行证</Option>
                    </Select>
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="证书编号"
                >
                  {getFieldDecorator('certificateNumber', {
                    rules: [{
                      required: true, message: '请输入',
                    }],
                  })(
                    <Input placeholder="请输入" maxLength="50" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="发证机关:"
                >
                  {getFieldDecorator('issuingOrgan', {
                    rules: [{
                      required: true, message: '请输入:',
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label=" 发证机关编号"
                >
                  {getFieldDecorator('issuingOrganNum', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="证书等级"
                >
                  {getFieldDecorator('certificateLevel', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Select placeholder="请选择证书等级" className="sls-style">
                      <Option value="护照">居民身份证</Option>
                      <Option value="居民身份证">护照</Option>
                      <Option value="回乡证">回乡证</Option>
                      <Option value="台湾通行证">台湾通行证</Option>
                    </Select>
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="发证日期"
                >
                  {getFieldDecorator('issuingDate', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <DatePicker placeholder="请选择证书发证日期" style={{ width: '100%' }} />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="培训单位名称"
                >
                  {getFieldDecorator('trainingUnitName', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入培训单位名称" maxLength="20" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="培训日期"
                >
                  {getFieldDecorator('trainingDate', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="十指指纹按印卡号"
                >
                  {getFieldDecorator('pressIndoCardNumber', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="证书有效期"
                >
                  {getFieldDecorator('certificateValidityPeriod', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="持枪证枪型代码"
                >
                  {getFieldDecorator('gunProofCode', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入持枪证代码" />
                    )}
                </FormItem>
                <div className="edit-option">
                  <Button
                    loading={submitting}
                    onClick={() =>
                      this.setState({ newCertificateOpen: false })}
                  >
                    取消
                      </Button>
                  <Button type="primary" style={{ marginLeft: 8 }} htmlType="submit">确认新增</Button>
                </div>
              </Form>
            </div>
          </div>
        </Drawer>
      </div>
    );
  }
  //编辑证书
  editCertificate = () => {
    /**
     * 抽屉需要样式
     */
    const style = {
      background: "#F9F9F9",
      // boxShadow: "rgba(0, 0, 0, 0.188235) 0px 10px 20px, rgba(0, 0, 0, 0.227451) 0px 6px 6px"
      boxShadow: "0 2px 11px 0 rgba(15, 113, 255, 0.2)"
    };
    /**
     * 抽屉组件内容
     */
    const drawerProps = {
      overlayColor: "rgba(0,0,0,0)",
      drawerStyle: style
    };
    /**
     * 证书表单内容
     */
    const { submitting } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    return (
      <div>
        <Drawer
          {...drawerProps}
          right
          open={this.state.editCertificateOpen}
          noTouchClose
          width={this.state.width}
          zIndex={999}
          onChange={(editCertificateOpen) => {
            this.setState({ editCertificateOpen });
          }}
        >
          <div
            style={{
              backgroundColor: "#fff",
              width: "100%",
              height: "100%"
            }}
            className="certificate-drawer"
          >
            <header className="edit-header">
              <h2>证书编辑</h2>
            </header>
            <div className="edit-form">

              <Form
                onSubmit={this.handleSubmit}
                style={{ marginTop: 24 }}
                className="edit-form"
              >
                <FormItem
                  {...formItemLayout}
                  label="证书类型"
                >
                  {getFieldDecorator('certificateType', {
                    rules: [
                      { required: true, message: '请选择证书类型!' },
                    ],
                  })(
                    <Select placeholder="请选择证书类型" className="sls-style">
                      <Option value="护照">居民身份证</Option>
                      <Option value="居民身份证">护照</Option>
                      <Option value="回乡证">回乡证</Option>
                      <Option value="台湾通行证">台湾通行证</Option>
                    </Select>
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="证书编号"
                >
                  {getFieldDecorator('certificateNumber', {
                    rules: [{
                      required: true, message: '请输入',
                    }],
                  })(
                    <Input placeholder="请输入" maxLength="50" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="发证机关:"
                >
                  {getFieldDecorator('issuingOrgan', {
                    rules: [{
                      required: true, message: '请输入:',
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label=" 发证机关编号"
                >
                  {getFieldDecorator('issuingOrganNum', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="证书等级"
                >
                  {getFieldDecorator('certificateLevel', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Select placeholder="请选择证书等级" className="sls-style">
                      <Option value="护照">居民身份证</Option>
                      <Option value="居民身份证">护照</Option>
                      <Option value="回乡证">回乡证</Option>
                      <Option value="台湾通行证">台湾通行证</Option>
                    </Select>
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="发证日期"
                >
                  {getFieldDecorator('issuingDate', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <DatePicker placeholder="请选择证书发证日期" style={{ width: '100%' }} />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="培训单位名称"
                >
                  {getFieldDecorator('trainingUnitName', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入培训单位名称" maxLength="20" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="培训日期"
                >
                  {getFieldDecorator('trainingDate', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="十指指纹按印卡号"
                >
                  {getFieldDecorator('pressIndoCardNumber', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入" />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="证书有效期"
                >
                  {getFieldDecorator('certificateValidityPeriod', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                    )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="持枪证枪型代码"
                >
                  {getFieldDecorator('gunProofCode', {
                    rules: [{
                      required: true,
                    }, {
                      validator: this.checkPhone
                    }],
                  })(
                    <Input placeholder="请输入持枪证代码" />
                    )}
                </FormItem>
                <div className="edit-option">
                  <Button
                    loading={submitting}
                    onClick={() =>
                      this.setState({ editCertificateOpen: false })}
                  >
                    取消
                      </Button>
                  <Button type="primary" style={{ marginLeft: 8 }} htmlType="submit">确认修改</Button>
                </div>
              </Form>
            </div>
          </div>
        </Drawer>
      </div>
    );
  }

  render() {
    // const gridStyle = {
    //   width: '25%',
    //   textAlign: 'center',
    // };

    const { visible, confirmLoading, ModalText } = this.state;
    return (
      <div className="CertificateInformationPage">
        <div>
          <Row gutter={16}>
            {/* 加载卡片信息 */}
            {this.showCard()}
            <Col span={12}>
              <div className="new-add" onClick={this.changeNewDrawer.bind(this, true)}>
                <Icon type="plus" style={{ "fontSize": "30px" }} />
                <div style={{ "color": "#333" }}>新增证书</div>
              </div>
            </Col>
          </Row>
        </div>

        {/* 删除模态框 */}
        <div>
          <Modal
            title="提示"
            visible={visible}
            onOk={this.handleOk}
            confirmLoading={confirmLoading}
            onCancel={this.handleCancel}
            okText="确认"
            cancelText="取消"
          >
            <p style={{ textAlign: "center", fontSize: "14px", color: "#333" }}>
              <i
                className="anticon anticon-exclamation-circle"
                style={{ color: "#faad14", fontSize: "22px", "marginRight": "16px", verticalAlign: "middle" }}
              />
              {ModalText}
            </p>
          </Modal>
        </div>

        {/* 弹出新增证书-抽屉 */}
        {/*this.newCertificate()*/}
        <NewCertificateDrawer onChange={(newCertificateOpen) => { this.setState({ newCertificateOpen }) }} visiable={this.state.newCertificateOpen} perId={this.props.perId} refreshList={() => { this.getAllCertificateInformation(); }} />

        {/* 弹出编辑证书-抽屉 */}
        {/*this.editCertificate()*/}
        <EditCertificateDrawer onChange={(editCertificateOpen) => { this.setState({ editCertificateOpen }) }} visiable={this.state.editCertificateOpen} currentId={this.state.currentId} refreshList={() => { this.getAllCertificateInformation(); }} />
      </div>
    );
  }
}
